<template>
  <div class="yf-steps">
    <div class="yf-steps-header">
      <div v-for="item in state.childrenProps" :class="['yf-steps-header-item', props.current == item.index ? 'active' : '']" :key="item.index">{{ item.title }}</div>
    </div>
    <div class="yf-steps-body">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, onBeforeMount, onBeforeUnmount, computed } from 'vue';
import mitt from 'mitt';

const props = withDefaults(
  defineProps<{
    current: number | string;
  }>(),
  {
    current: 1,
  },
);

const name = 'YfSteps';
const stepsEvent = mitt();
const current = computed(() => props.current);

const state = reactive<{
  childrenProps: {
    title: string;
    index: number | string;
  }[];
}>({
  childrenProps: [],
});

onBeforeMount(() => {
  state.childrenProps = [];
  stepsEvent.on('add_step_child', (params: any) => {
    state.childrenProps.push({ title: params.title, index: params.index });
  });
});

onMounted(() => {});

onBeforeUnmount(() => {
  stepsEvent.off('add_step_child');
});

defineExpose({
  name,
  current,
  stepsEvent,
});
</script>

<style lang="less" scoped>
.yf-steps {
  position: relative;
  z-index: 1;

  .yf-steps-header {
    display: flex;
    height: 40px;
    background: #fafafa;

    .yf-steps-header-item {
      flex: 1;
      color: #555;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      position: relative;
      z-index: 2;
      &:after {
        position: absolute;
        top: 0;
        left: 100%;
        width: 0;
        height: 0;
        content: '';
        display: block;
        border-left: 20px solid #fafafa;
        border-top: 20px solid transparent;
        border-right: 34px solid transparent;
        border-bottom: 20px solid transparent;
      }
      &.active {
        background: #009639;
        color: #fff;
        z-index: 1;
        &:after {
          position: absolute;
          border-left: 20px solid #009639;
          border-top: 20px solid transparent;
          border-right: 34px solid transparent;
          border-bottom: 20px solid transparent;
        }
      }

      &:last-child::after {
        display: none;
      }
    }
  }
  .yf-steps-body {
    padding-top: 20px;
  }
}
</style>
